import { ENUM } from '@/store/State/stateTypes'
export default {
  props: {
    id: {},
    tableName: {},
    tableCode: {}
  },
  data () {
    return {
      keywords: '',
      checkedKeys: [],
      isIndeterminate: false,
      checkAll: false,
    }
  },
  computed: {
    languages () {
      return this.$store.state[ENUM].languages || []
    }
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    close () {
      this.resetData()
      this.$emit('close')
    },
    resetData () {
      this.tableData = []
      this.langData = {}
      this.keywords = ''
      this.activeName = 'common'
      this.checkAll = false
    },
    cancel () {
      this.$emit('close')
    },
    addRow () {
      let temp = {
        key: '',
        edit: true
      }
      this.languages.forEach(lang => {
        temp[lang.code] = ''
      })
      let arr = this.tableData
      if (this.activeName && this.activeName == 'menu') {
        arr = this.menuData
      }
      arr.push(temp)
    },
    del (index) {
      let arr = this.tableData
      if (this.activeName && this.activeName == 'menu') {
        arr = this.menuData
      }
      this.$confirm(this.LANG.DELETE_CONFIRM, {
        title: this.LANG.TIPS
      }).then(() => {
        arr.splice(index, 1)
        this.post()
      })
    },
    /**
     * @description: 提交
     * @param {type}
     * @return:
     */
    submit (index) {
      let arr = this.tableData
      if (this.activeName && this.activeName == 'menu') {
        arr = this.menuData
      }
      this.$set(arr[index], 'edit', false)
      this.post()
    },
    save () {
      let arr = this.tableData
      if (this.activeName && this.activeName == 'menu') {
        arr = this.menuData
      }
      this.Visible = false
      this.post()
    },
    /**
     * @description: 发送数据
     * @param {type}
     * @return:
     */
    post () {
      this.transToLangData()
      this.$emit('submit', this.langData)
    },
    /**
     * @description: 复制键值对 不同键值通过换行符隔离，键值内通过冒号隔离
     * @param {type}
     * @return:
     */
    handlePaste (e) {
      let arr = this.tableData
      if (this.activeName && this.activeName == 'menu') {
        arr = this.menuData
      }
      if (!arr[arr.length - 1].key) {
        arr.splice(arr.length - 1, 1)
      }
      let text = e.clipboardData.getData('text')
      let list = text.split('\n')
      for (let row of list) {
        let rlist = row.split(':')
        let data = {
          key: rlist[0] ? rlist[0].replace(/'|,/g, '').trim() : '',
          zh: rlist[1] ? rlist[1].replace(/'|,/g, '').trim() : '',
          en: rlist[2] ? rlist[2].replace(/'|,/g, '').trim() : '',
          edit: true
        }
        arr.push(data)
      }
    },
    copy () {
      let obj = ''
      let languages = {}
      for (let data of this.multipleSelection) {
        let value = ''
        for (let lang of this.languages) {
          if (!languages[lang.code]) {
            languages[lang.code] = JSON.parse(this.langData[lang.code])
          }
          value += `:${languages[lang.code][data.key]}`
        }
        obj += `${data.key + value}\n`
      }
      let copyInput = document.createElement('TEXTAREA')
      copyInput.style.width = '1px'
      copyInput.style.height = '1px'
      copyInput.style.border = 0
      copyInput.style.outline = 0
      document.body.appendChild(copyInput)
      copyInput.value = obj.replace(/\n$/, '')
      copyInput.select()
      document.execCommand('Copy')
      document.body.removeChild(copyInput)
    }
  },
  watch: {
    id (val) {
      this.loading = true
      this.currentPage = 1
      this.refreshTable()
    },
    activeName () {
      this.checkAll = false
    }
  }
}
